/**
 * @description placeholder menu
 * @author snake
 */

import $, { Dom7Array } from '../../utils/dom'
import { items, inserPlaceholder } from './helper'
import { MOVE_SVG } from '../../constants/icon-svg'

class placeholderMenu {
  $content 
  title = '插入占位符'
  iconSvg = MOVE_SVG
  tag = 'button'
  showDropPanel = true

  // JS 语法
  constructor() {
  }

  // 菜单是否需要激活（如选中加粗文本，“加粗”菜单会激活），用不到则返回 false
  isActive(editor) {
    // JS 语法
    return false
  }

  // 获取菜单执行时的 value ，用不到则返回空 字符串或 false
  getValue(editor) {
    // JS 语法
    return ''
  }

  // 菜单是否需要禁用（如选中 H1 ，“引用”菜单被禁用），用不到则返回 false
  isDisabled(editor) {
    // JS 语法
    return false
  }

  // 点击菜单时触发的函数
  exec(editor, value) {
    // JS 语法
    // DropPanel menu ，这个函数不用写，空着即可
  }

  // 定义 DropPanel 内部的 DOM Element
  getPanelContentElem(editor) {
    if (this.$content) return this.$content[0]
    
    // 1：创建 ul
    const $content = $(`<list style="
      text-align: left;
      cursor: pointer;
      list-style: none;
    "></list>`)

    // 2：创建 li
    for (let item of items) {
      const $li = $(`<li 
        style="cursor: pointer; padding: 5px;"
        data-placeholder=${item.value}
      >${item.label}</li>`)

      // mouseout 事件监听 设置hover样式
      $li.on('mouseout', function (evt) {
        evt.stopPropagation()

        let target = evt.target
        target.style.background = ''
      })

      // 插入 list
      $content.append($li)
    }

    // 3：ul click 事件监听
    $content.on('click', function (evt) {
      evt.stopPropagation()
      let target = evt.target

      // editor插入 li data-value 内容
      let placeholder = target.getAttribute('data-placeholder')
      let value = target.innerHTML

      // 插入新元素
      inserPlaceholder(editor, value, placeholder)
    })

    // 4：ul mouseover 事件监听
    $content.on('mouseover', function (evt) {
      evt.stopPropagation()

      let target = evt.target
      target.style.background = '#eee'
    })

    this.$content = $content
    return $content[0] // 返回 DOM Element 类型
  }
}

export default placeholderMenu
